<template>
  <!-- 会议直播-申请及管理 -->
  <div class="application_and_management">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="线下技术交流讲座" name="first">
        <lecture></lecture>
      </el-tab-pane>
      <el-tab-pane label="线下展位直播" name="second">
        <administration></administration>
      </el-tab-pane>
      <el-tab-pane label="线上洽谈" name="third">
        <negotiation></negotiation>
      </el-tab-pane>
      <el-tab-pane label="线上直播" name="fourth">
        <online></online>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import administration from "../../Administration";
import lecture from "../../lecture";
import negotiation from "../../Negotiation";
import online from "../../online";
export default {
  name: "application_and_management",
  components: {
    lecture,
    administration,
    negotiation,
    online,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang='less' scoped>
.application_and_management {
  padding-left: 30px;
  font-size: 18px;
  padding-top: 27px;
  color: #333333;
  /deep/ .el-tabs,
  .el-tabs--top {
    width: 1580px;
    .el-tabs__header {
      background: rgba(255, 255, 255, 1);
      border-radius: 8px;
      padding-left: 50px;
      box-sizing: border-box;
      .el-tabs__nav-wrap {
        height: 60px;
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            height: 60px;
            line-height: 60px;
          }
        }
      }
    }
  }
  /deep/ .el-tabs__item {
    // padding: 0 0.2rem;
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #333333;
  }
  /deep/ .el-tabs__item.is-active {
    color: #004cb3;
    font-weight: bold;
  }
  /deep/ .el-tabs__item:hover {
    color: #004cb3;
    font-weight: bold;
  }
  /deep/ .el-tabs__nav-wrap::after {
    height: 2px;
    background-color: #fff;
    z-index: 1;
  }
  /deep/ .el-tabs__content {
    margin-top: 30px;
    background-color: #fff;
  }
  /deep/ .el-tabs__active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: #004cb3;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    list-style: none;
  }
}
</style>